<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
        .wrong {
            border: 2px solid red;
        }
        .right {
            border: 2px solid #91B81D;
        }
        .false{
        	color: red;
        }
        .pass {
        	color: green;
        }
    </style>
	</head>
	<body>
		    账号：<input type="text"/><span></span><br><br>
                          密码：<input type="password"/><span></span>
	</body>
	<script>
		//需求：失去焦点的时候判断input按钮中的值，如果账号或密码在6-12个字符之间通过，否则报错。
        var inp = document.getElementsByTagName("input")
        var span = document.getElementsByTagName("span")
        var zh = inp[0]
        var mm = inp[1]
        zh.onblur=function(){
        	if(this.value.length>12||this.value.length<6){
        		this.className="wrong"
        		span[0].className="false"
        		span[0].innerHTML="&nbsp&nbsp&nbsp错误,账号在6-12个字符之间"
        	}else{
        		this.className="right"
        		span[0].className="pass"
        		span[0].innerHTML="&nbsp&nbsp&nbsp通过"
        	}
        }
        mm.onblur=function(){
        	if(this.value.length>12||this.value.length<6){
        		this.className="wrong"
        		span[1].className="false"
        		span[1].innerHTML="&nbsp&nbsp&nbsp错误,密码在6-12个字符之间"
        	}else{
        		this.className="right"
        		span[1].className="pass"
        		span[1].innerHTML="&nbsp&nbsp&nbsp通过"
        	}
        }
	</script>
	
</html>
